<template>
  <div>
    <div class="material-item">
      <div class="row">
        <p class="label">物料编码：</p>
        <p class="value">{{ item.code || "" }}</p>
      </div>
      <div class="row">
        <p class="label">物料名称：</p>
        <p class="value">{{ item.name || "" }}</p>
      </div>
      <div class="row">
        <p class="label">物料规格：</p>
        <p class="value">{{ item.standard || "" }}</p>
      </div>
      <div class="flex-row aligh-item-center justify-content-between">
        <div class="material-input material">
          <p class="label">完成数量：</p>
          <el-input
            v-if="item.isBatchMag==false"
            v-model="item.actualAmount"
            :disabled="!isShowSubmitBtn"
            @focus="openDialog"
          />
          <p class="value" v-else>{{item.actualAmount}}</p>
        </div>
        <div class="material-company material">
          <p class="label">单位：</p>
          <p class="value" style="white-space: nowrap;">{{ item.comp || "" }}</p>
        </div>
      </div>
      <div class="flex-row aligh-item-center justify-content-between">
        <div class="material-input material">
          <p class="label">申请人：</p>
          <el-select v-model="info.applyPerson" :disabled="!isShowSubmitBtn" filterable @change="applyPersonChange">
            <el-option v-for="(item,index) in appvalUserList" :key="index" :label="item.nickname" :value="item.username"></el-option>
          </el-select>
          <!-- <el-input
            v-if="item.isBatchMag==false"
            v-model="item.actualAmount"
            :disabled="!isShowSubmitBtn"
            @focus="openDialog"
          /> -->
          <!-- <p class="value" v-else>{{item.actualAmount}}</p> -->
        </div>
        <div class="material-company material">
          <p class="label">备注：</p>
          <el-input
            v-if="isShowSubmitBtn"
            v-model="item.materialRemark"
          />
          <p v-else class="value">{{ item.materialRemark }}</p>
        </div>
      </div>
    </div>
    <!-- <van-popup
      v-model="batchShow"
      round
      position="bottom"
      :style="{ maxHeight: '50%' }"
    >
      <div class="p-t-box">
        <div class="p-title">
          <img src="@/assets/images/allocation/batch.png">
          <div class="text">批次推荐</div>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" height="200">
        <el-table-column prop="barCode" label="批次号" />
        <el-table-column prop="warehouseName" label="库房" />
        <el-table-column prop="currentInventory" label="数量" />
        <el-table-column prop="warehousingDate" label="入库时间" />
      </el-table>
      <div class="line" />
      <div class="close" @click="batchShow = false">取消</div>
    </van-popup> -->
    <ComDialog
      :show.sync="dialogShow"
      :num="item.actualAmount"
      :title="title"
      @confirm="confirmChange"
    />
  </div>
</template>

<script>
import ComDialog from "./comDialog.vue";
import { barCodeTrackListRecommend,usersListCompanyEnabled } from "@/api/allocation";
import { Toast } from "vant";
export default {
  name: "Item",
  components: {
    ComDialog
  },
  props: {
    isShowSubmitBtn:Boolean,
    item: {
      type: Object,
      required: true,
    },
    info: {
      type: Object,
      require: true,
    },
    status: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      detailShow: false,
      checked: false,
      num: 1,
      batchShow: false,
      tableData: [],
      dialogShow: false,
      title: "完成数量",
      activeData: {},
      activeIndex: null,
      appvalUserList:[]
    };
  },
  watch: {
    item: {
      handler(newVal) {
        if (newVal.isBatchMag == true) {
          this.countMatarialNum();
        }
        if (newVal.barcodeList && newVal.barcodeList.length > 0) {
          this.detailShow = true;
        } else {
          this.detailShow = false;
        }
      },
      deep: true,
      immediate: true,
    },
    // barListCount(oldVal,newVal){
    //   if(oldVal!==newVal){
    //     this.countMatarialNum()
    //   }
    // }
  },
  computed: {
    // barListCount(){
    //   return this.item.barcodeList?.length
    // }
  },
  mounted() {
    // this.getPiciDataList()
    this.getAppvalUserList()
  },
  methods: {
    applyPersonChange(e){
      console.log(this.appvalUserList)
      if(this.appvalUserList.length == 0)return
      let userInfo = this.appvalUserList.find(item=>item.username == e)
      this.$set(this.info,'personPhone',userInfo.mobile)
    },
    // 获取申请人列表
    async getAppvalUserList() {
      let result = await usersListCompanyEnabled();
      let res = result.data;
      if (res.code == 200) {
        this.appvalUserList = res.data.records;
      }else{
        this.appvalUserList = []
      }
    },
    // 获取批次推荐
    async getPiciDataList() {
      const obj = {
        productCode: this.item.code ? this.item.code : "",
        planAmount: this.item.planNum ? this.item.planNum : "",
        warehouseCode: this.info.warehouseCode ? this.info.warehouseCode : "",
      };
      let r = await barCodeTrackListRecommend(obj);
      let res = r.data;
      if (res.code == 200) {
        if (res.data) {
          this.tableData = res.data;
        } else {
          this.tableData = [];
        }
        this.batchShow = !this.batchShow;
      } else {
        Toast.fail(res.message || "系统错误");
      }
    },
    // 统计批次
    countMatarialNum() {
      let data = this.item.barcodeList;
      if (!data || data.length == 0) {
        this.item.actualAmount = this.item.actualAmount || 0;
      } else {
        let count = data.reduce((prev, curr) => {
          return Number(prev.count) + Number(curr.count);
        });
        if (typeof count === "number") {
          this.item.actualAmount = count;
        } else {
          this.item.actualAmount = count.count || 0;
        }
      }
    },
    thisMaxValue(val) {
      if (val.count > val.currentInventory) {
        val.count = val.currentInventory;
      } else if (!val.count || val.count < 1) {
        val.count = 1;
      }
    },
    // 单个删除
    deleteOne(val, index, pindex) {
      this.checkChange(val);
      this.item.barcodeList.splice(index, 1);
    },
    // 选中事件
    checkChange(val) {
      this.$emit("updateCheck", val);
    },
    closeDetail() {
      this.detailShow = false;
    },
    openDetail() {
      this.detailShow = !this.detailShow;
    },
    confirmChange(val) {
      // this.item.actualAmount = val
      this.$set(this.item, "actualAmount", val);
    },
    batchChange() {
      this.getPiciDataList();
    },
    openDialog(item, index) {
      if (item.isBatchMag == true) {
        return;
      }
      this.dialogShow = true;
      this.activeData = item;
      this.activeIndex = index;
    },
    closeDialog() {
      this.dialogShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/css/common.scss";
.material-item {
  /deep/ .material-input>.el-input>.el-input__inner {
    width: 80%;
    height: 25px;
    line-height: 25px;
    padding: 0;
    text-align: center;
  }
  /deep/ .material-company>.el-input>.el-input__inner {
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
    text-align: left;
  }
  /deep/ .material-input>.el-select>.el-input>.el-input__inner {
    width: 100px;
    height: 25px;
    line-height: 25px;
    
  }
  /deep/ .el-input__icon{
      line-height: 25px;
    }
  // /deep/ .el-input {
  //   width: auto;
  // }
  .material-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
  }
}
.ci-3-r {
}
.detail-box {
  padding: 8px 11px 4px 7px;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  margin-bottom: 10px;
}
.card {
  position: relative;
  .batch {
    width: 62px;
    height: 28px;
    background: linear-gradient(
      180deg,
      rgba(105, 153, 243, 0.96) 0%,
      rgba(68, 130, 245, 0.96) 100%
    );
    opacity: 1;
    border-radius: 4px;
    font-size: 12px;
    font-family: SourceHanSansCN-Regular;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card-info {
    .ci-1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      .ci-1-l {
        display: flex;
        align-items: center;
        .round {
          width: 5px;
          height: 5px;
          background: #548af1;
          border-radius: 50%;
          margin-right: 6px;
        }
        .ci-1-l-text {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    .ci-2 {
      font-size: 13px;
      font-family: SourceHanSansCN-Regular;
      color: #333333;
      padding-left: 13px;
    }
    .dotted-line {
      width: 100%;
      height: 0px;
      border: 1px dashed #ebe8e8;
      margin: 10px 0 7px 0;
    }
    .ci-3 {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      padding: 0 8px 0 11px;
      span {
        min-width: 56px;
        color: #666666;
      }
      .ci-3-r {
        display: flex;
      }
    }
  }
  .batch-bg {
    position: absolute;
    top: -8px;
    right: -10px;
    width: 48.72px;
    height: 51.55px;
    background: url("../../../assets/images/allocation/batch-bg.png") no-repeat;
    background-size: 100% 100%;
    .b-b-text {
      width: 50%;
      height: 134%;
      transform: rotate(50deg);
      font-size: 12px;
      font-family: SourceHanSansCN-Regular;
      color: #ffffff;
    }
  }
}

.c-b {
  text-align: center;
  span {
    font-size: 10px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #a8a8a8;
    margin-right: 3px;
  }
  img {
    width: 6.36px;
    height: 3.13px;
    padding-bottom: 4px;
  }
}

.open-detail {
  display: flex;
  background: #f8f8f8;
  border-radius: 2px;
  margin-top: 8px;
  margin-bottom: 12px;
  padding: 12px 14px 12px 11px;
  font-size: 14px;
  position: relative;
  .checkbox {
    margin: 3px 9px 0 0;
  }
  .o-d-box {
    width: 100%;
    font-size: 13px;
    font-family: Source Han Sans CN;
    .o-d-b-t {
      margin-bottom: 8px;
      font-weight: 500;
      width: 110px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .o-d-b-c {
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      .o-d-b-c-row {
        display: flex;
        margin-bottom: 8px;
        .o-d-b-c-l {
          margin-right: 8px;
          color: #666666;
        }
      }
    }
    .o-d-b-b {
      display: flex;
      font-weight: 400;
      .o-d-b-b-l {
        min-width: 58px;
        color: #666666;
        margin-right: 8px;
      }
      .o-d-b-b-r {
        width: 110px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  .garbage1 {
    position: absolute;
    right: 9px;
    bottom: 8px;
    width: 13.69px;
    height: 15.21px;
  }
}

.p-t-box {
  padding: 11px 8px 10px 5px;
  .p-title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 10px;
    img {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
    .text {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      margin-left: 8px;
    }
  }
}
.line {
  width: 100%;
  height: 6px;
  background: #f7f7f7;
}
.close {
  text-align: center;
  font-size: 16px;
  font-family: SourceHanSansCN-Regular;
  color: #333333;
  padding: 8px 0;
}
</style>
